<script>
import { defineComponent, computed } from 'vue'
import { createNamespace, transformStyleSize } from '../utils'
import FanImage from '../image/image.vue'

export default defineComponent({
  name: createNamespace('Empoty')[0],
  options: { virtualHost: true },
  components: { FanImage },
  props: {
    image: {
      type: String,
      default: 'https://img.dac6.cn/fre/saas/empty-box.png'
    },
    imageSize: {
      type: [Number, String, Array],
      default: 100
    },
    messageStyle: [Object, String],
    message: {
      type: String,
      default: '暂无内容'
    },
    // 是否识别 \n 等
    pre: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const imageStyle = computed(() => {
      let style = props.imageSize
      if (!Array.isArray(props.imageSize)) style = [props.imageSize, props.imageSize]
      return style
    })
    const msgStyle = computed(() => transformStyleSize(props.messageStyle))

    return {
      imageStyle,
      msgStyle
    }
  }
})
</script>

<template>
  <div class="fan-empty">
    <FanImage :src="image" :width="imageStyle[0]" :height="imageStyle[1]" />
    <p v-if="message" class="fan-empty__msg" :class="{ pre: pre }" :style="msgStyle">{{ message }}</p>
    <div class="fan-empty__bottom">
      <slot />
    </div>
  </div>
</template>

<style lang="less">
.fan-empty {
  padding: 32px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: var(--fan-black-6);

  &__msg {
    text-align: center;
    word-break: break-all;
    margin-top: 10px;

    &.pre {
      white-space: pre-wrap;
    }
  }

  &__bottom {
    margin-top: 24px;
  }
}
</style>
